<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网！<a href="#">[登陆]</a><a href="#">[免费注册]</a>

            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <img src="images/logo.jpg" alt="慕课网">
            </div>
            <div class="search-box fl">
                <input class="search-text fl" type="text" >
                <input class="search-btn fr" type="button" value="搜索" >
            </div>
            <div class="shopCar fr">
                <span class="shopText fl">购物车</span>
                <span class="shopNumber fl">10</span>
            </div>
        </div>
    </div>
    <div class="nav-box">
        <div class="comWidth">
            <div class="shopClass fl">
                <h3>全部商品分类<i></i></h3>
                <div class="shopClass-show">
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                </div>
                <div class="shopClass-list hide">
                    <div class="shopList-content">
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                        <div class="shopList-links">
                            <a href="#">文字测试内容<span></span></a>
                            <a href="#">文字测试内容<span></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="nav fl">
                <li><a href="#" class="active" >数码城</a> </li>
                <li><a href="#">天黑黑</a> </li>
                <li><a href="#">团购</a> </li>
                <li><a href="#">发现</a> </li>
                <li><a href="#">二手特卖</a> </li>
                <li><a href="#">名品会</a> </li>
            </ul>
        </div>
    </div>
</div>
<div class="banner comWidth clearfix">
    <div class="banner-bar banner-big">
        <ul class="imgBox">
            <li><a href="#"><img src="images/banner-1.jpg" alt="banner"> </a> </li>
            <li><a href="#"><img src="images/banner-2.jpg" alt="banner"> </a> </li>
            <li><a href="#"><img src="images/banner-2.jpg" alt="banner"> </a> </li>
        </ul>
        <div class="imgNum">
            <a href="#" class="active"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>

    </div>
</div>
<div class="shopTitle comWidth">
    <span class="icon"></span>
    <h3>商品标题</h3>
    <a href="#" class="more">更多&gt;&gt;</a>
</div>
<div class="shopList comWidth clearfix">
    <div class="leftArea">
        <div class="banner-bar banner-sm">
            <ul class="imgBox">
                <li><a href="#"><img src="images/banner-1.jpg" alt="banner"> </a> </li>
                <li><a href="#"><img src="images/banner-2.jpg" alt="banner"> </a> </li>
                <li><a href="#"><img src="images/banner-2.jpg" alt="banner"> </a> </li>
            </ul>
            <div class="imgNum">
                <a href="#" class="active"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="rightArea">
        <div class="shopList-top clearfix">
            <div class="shop-item">
            <div class="shopList-img">
                <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
            </div>
            <h3>HTC新渴望系列</h3>
            <p>1899元</p>
            </div>
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
        </div>
        <div class="shopList-sm">
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="shopTitle comWidth">
    <span class="icon"></span>
    <h3>商品标题</h3>
    <a href="#" class="more">更多&gt;&gt;</a>
</div>
<div class="shopList comWidth clearfix">
    <div class="leftArea">
        <div class="banner-bar banner-sm">
            <ul class="imgBox">
                <li><a href="#"><img src="images/banner-1.jpg" alt="banner"> </a> </li>
                <li><a href="#"><img src="images/banner-2.jpg" alt="banner"> </a> </li>
                <li><a href="#"><img src="images/banner-2.jpg" alt="banner"> </a> </li>
            </ul>
            <div class="imgNum">
                <a href="#" class="active"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="rightArea">
        <div class="shopList-top clearfix">
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
            <div class="shop-item">
                <div class="shopList-img">
                    <a href="#"><img src="images/htc.jpg" alt="HTC"> </a>
                </div>
                <h3>HTC新渴望系列</h3>
                <p>1899元</p>
            </div>
        </div>
        <div class="shopList-sm">
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
            <div class="shop-item-sm">
                <div class="shop-img-sm">
                    <a href="#" ><img src="images/htc.jpg"> </a>
                </div>
                <div class="shop-img-text">
                    <p>NFC技术一碰，轻松配对</p>
                    <h3>￥149</h3>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="hr25"></div>
<div class="footer">
    <p>
        <a href="#">慕课简介</a>
        <i>|</i>
        <a href="#">慕课公告</a>
        <i>|</i>
        <a href="#">招贤纳士</a>
        <i>|</i>
        <a href="#">联系我们</a>
        <i>|</i>客服热线400-675-1234
    </p>
    <p>
        Copyright© 2006 - 2014 慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;
        京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123
    </p>
    <p class="web">
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
    </p>
</div>
</body>
</html>